<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>阿以冲突知识消消乐</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://cdn.jsdelivr.net/npm/qrcode-generator@1.4.4/qrcode.min.js"></script>
</head>
<body>
    <div id="game-container">
        <div id="rules-screen" class="screen" style="display: block;">
            <h1>阿以冲突知识消消乐小游戏</h1>
            <div class="rules-text">
                <p>游戏规则：</p>
                <p>1. 点击两个相同的方块进行配对</p>
                <p>2. 配对成功后，方块会消失并得分</p>
                <p>3. 游戏时间为5分钟</p>
                <p>4. 配对成功得1分</p>
                <p>5. 时间结束或所有方块配对完成，游戏结束</p>
                <p>6. 多人游戏：扫描下方二维码加入游戏</p>
            </div>
            <div class="qr-section">
                <div id="qrcode"></div>
                <p class="qr-tip">扫描二维码加入多人游戏</p>
            </div>
            <div class="rules-demo">
                <div class="demo-card" data-pair="1">犹太人</div>
                <div class="demo-card" data-pair="1">犹太教</div>
            </div>
            <button id="direct-start-btn" class="start-btn">开始游戏</button>
        </div>

        <div id="player-input-screen" class="screen" style="display: none;">
            <h2>请输入您的姓名</h2>
            <div class="input-container">
                <input type="text" id="player-name" placeholder="请输入姓名" maxlength="20">
                <button id="start-game-btn" class="start-btn">开始游戏</button>
            </div>
            <div class="current-players">
                <h3>当前玩家</h3>
                <div id="players-list"></div>
            </div>
        </div>

        <div id="game-screen" class="screen">
            <div class="game-header">
                <div id="timer">05:00</div>
                <div id="player-scores"></div>
            </div>
            <div id="game-board"></div>
        </div>

        <div id="result-screen" class="screen">
            <h2>游戏结束</h2>
            <div id="winner-display">
                <div class="winner-info">
                    <span class="player-name"></span>
                    <span class="congrats">🏆 获胜者 🏆</span>
                </div>
            </div>
            <div class="final-scores-container">
                <h3>最终排名</h3>
                <div id="final-scores"></div>
            </div>
            <button id="play-again-btn">再玩一次</button>
        </div>
    </div>

    <audio id="bgm" loop>
        <source src="bgm/超级玛丽音效.mp3" type="audio/mpeg">
    </audio>

    <script>
        // 添加错误处理
        window.onerror = function(msg, url, lineNo, columnNo, error) {
            console.error('Error: ' + msg + '\nURL: ' + url + '\nLine: ' + lineNo + '\nColumn: ' + columnNo + '\nError object: ' + JSON.stringify(error));
            return false;
        };
    </script>
    <script src="game.js"></script>
</body>
</html> 